import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:stacked/stacked.dart';
import '../../heartbeat/helpers/magma_constant.dart';
import '../../heartbeat/helpers/magma_color.dart';
import '../home_story/home_story.dart';
import '../community_story/community_story.dart';
import '../message_story/message_story.dart';
import '../user_story/my_story.dart';

/// 主页面视图模型
class MainNavigatorViewModel extends BaseViewModel {
  int _currentIndex = 0;

  /// 获取当前选中的索引
  int get currentIndex => _currentIndex;

  /// 切换底部导航栏
  void switchTab(int index) {
    if (_currentIndex != index) {
      _currentIndex = index;
      notifyListeners();
    }
  }

  /// 获取当前页面
  Widget getCurrentPage() {
    switch (_currentIndex) {
      case 0:
        return const HomeNavigator();
      case 1:
        return const CommunityNavigator();
      case 2:
        return const MessageNavigator();
      case 3:
        return const UserNavigator();
      default:
        return const HomeNavigator();
    }
  }
}

/// 主页面
class MainNavigator extends StatelessWidget {
  const MainNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<MainNavigatorViewModel>.reactive(
      viewModelBuilder: () => MainNavigatorViewModel(),
      builder: (context, viewModel, child) {
        return Scaffold(
          extendBody: true,
          body: viewModel.getCurrentPage(),
          bottomNavigationBar: _buildBottomNavigationBar(context, viewModel),
        );
      },
    );
  }

  /// 构建底部导航栏
  Widget _buildBottomNavigationBar(
    BuildContext context,
    MainNavigatorViewModel viewModel,
  ) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: MagmaColor.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(33.r),
          topRight: Radius.circular(33.r),
        ),
      ),
      padding: EdgeInsets.only(top: 3.h),
      child: Container(
        width: double.infinity,
        height: 98.h,
        decoration: BoxDecoration(
          color: MagmaColor.black,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30.r),
            topRight: Radius.circular(30.r),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildNavItem(
              context,
              viewModel,
              index: 0,
              icon: MagmaConstant.homeIcon,
            ),
            _buildNavItem(
              context,
              viewModel,
              index: 1,
              icon: MagmaConstant.communityIcon,
            ),
            _buildNavItem(
              context,
              viewModel,
              index: 2,
              icon: MagmaConstant.messageIcon,
            ),
            _buildNavItem(
              context,
              viewModel,
              index: 3,
              icon: MagmaConstant.userIcon,
            ),
          ],
        ),
      ),
    );
  }

  /// 构建导航项
  Widget _buildNavItem(
    BuildContext context,
    MainNavigatorViewModel viewModel, {
    required int index,
    required String icon,
  }) {
    final isSelected = viewModel.currentIndex == index;

    return GestureDetector(
      onTap: () => viewModel.switchTab(index),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOutCubic,
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.r),
          color:
              isSelected
                  ? MagmaColor.purple.withOpacity(0.15)
                  : Colors.transparent,
        ),
        child: AnimatedScale(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOutCubic,
          scale: isSelected ? 1.1 : 1.0,
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOutCubic,
            child: Image.asset(
              icon,
              width: 28.w,
              height: 28.w,
              color:
                  isSelected
                      ? MagmaColor.purple
                      : Colors.white.withOpacity(0.6),
            ),
          ),
        ),
      ),
    );
  }
}

/// 首页导航器
class HomeNavigator extends StatelessWidget {
  const HomeNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return const HomeStory();
  }
}

/// 社区导航器
class CommunityNavigator extends StatelessWidget {
  const CommunityNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return const CommunityStory();
  }
}

/// 消息导航器
class MessageNavigator extends StatelessWidget {
  const MessageNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return const MessageStory();
  }
}

/// 用户导航器
class UserNavigator extends StatelessWidget {
  const UserNavigator({super.key});

  @override
  Widget build(BuildContext context) {
    return const PersonalStory();
  }
}
